<template>
  <div>
    <el-form-item label="信号事件">
      <el-select v-model="bpmnFormData.signalValue" class="m-2" placeholder="请选择信号事件" clearable @change="handleSignalChange" @clear="removeSignal">
        <el-option
          v-for="item in signalList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import {StrUtil} from '@/utils/StrUtil';
import {checkEventType, uuid} from "@/components/Process/common/bpmnUtils";

export default {
  name: "SignalEventPanel",
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      bpmnFormData: {
        signalValue: "",
        eventDefinitions: []
      },
      signalList: [],
    }
  },
  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetTaskForm();
        }
      },
      immediate: true, // 立即生效
    },
  },
  methods: {
    resetTaskForm() {
      this.bpmnFormData = {
        signalValue: "",
        eventDefinitions:[]
      };
      this.getSignal();
      this.bpmnFormData.$type = this.modelerStore.element?.businessObject?.$type;
      // 处理事件
      if (checkEventType(this.bpmnFormData.$type)) {
        this.getFlowEvent(this.bpmnFormData,this.modelerStore.element.businessObject)
      }
    },
    // 处理事件
    getFlowEvent(bpmnFormData, businessObject) {
      if (businessObject.eventDefinitions && businessObject.eventDefinitions.length > 0) {
        if (businessObject.eventDefinitions[0].$type.indexOf("Signal") !== -1) {
          if (businessObject.eventDefinitions[0].signalRef) {
            bpmnFormData.signalValue = businessObject.eventDefinitions[0].signalRef.id;
          }
        }
      }
    },

    // 更新信号事件
    handleSignalChange(value){
      const signal = this.signalList.find(element => element.$type === "bpmn:Signal" && element.id === value)
      const signalEventDefinition = this.modelerStore.moddle.create("bpmn:SignalEventDefinition", {
        id: `SignalEventDefinition_${uuid(8)}`,
        signalRef: signal
      });
      this.modelerStore.element.businessObject.eventDefinitions = [signalEventDefinition];
    },

    // 删除信号
    removeSignal() {
      this.$confirm("确认移除信号吗？", "提示", {
        confirmButtonText: "确 认",
        cancelButtonText: "取 消",
        type: 'warning',
        center: true
      }).then(() => {
        const element = this.modelerStore.element;
        if (element.businessObject?.eventDefinitions?.values) {
          element.businessObject.eventDefinitions.values =
            element.businessObject.eventDefinitions.values.filter(ex => ex.$type !== 'bpmn:SignalEventDefinition');
        }
      }).catch(() => console.info("操作取消"))
    },

    // 获取全局定义的信号
    getSignal(){
      this.rootElements = this.modelerStore.modeler.getDefinitions().rootElements;
      this.signalList = [];
      this.rootElements.forEach(el => {
        if (el.$type === "bpmn:Signal") {
          this.signalList.push({ ...el });
        }
      });
    }
  }
}
</script>
